<script setup>
import {reactive} from 'vue'
import {Subnt} from '../../wailsjs/go/backend/App'

const data = reactive({
  resultText: "",
  shouldShow:false,
})

function changeFile(e){

const file = e.target.files[0]
const fileName = file.name;
const reader = new FileReader();
if (fileName.includes(".txt")) {
    reader.onload = (res) => {
      Subnt( res.target.result).then(result=>{
        data.resultText = result;
        data.shouldShow = true;
      });
    };
    reader.onerror = (err) => console.log(err);
    reader.readAsText(file);
  }

}
</script>

<template>
  <main>
    <div class="fileContainer">
      <input type="file" id="fileImage" name="fileImage" @change="changeFile">
    </div>
    <div v-if="data.shouldShow" class="fileContainer">
      <textarea id="result" class="result" v-model="data.resultText"  rows="15" cols="30" >
      </textarea>
    </div>
  </main>
</template>

<style scoped>
.fileContainer {
  margin: 10px 10px;
  padding: 20 8px;
  cursor: pointer;
}

</style>
